<!--
内容：邀约面试
作者：黄彪
日期： 20170706
-->

<template>
    <div class="inviteInterview-inviteInterview">
        <!-- 面试者信息  -->
        <Row>
            <Col span="4">
                应聘者
            </Col>
            <Col span="6">
                应聘职位
            </Col>
            <Col span="6">
                应聘时间
            </Col>
            <Col span="8">
                邮箱
            </Col>
        </Row>
        <Row>
            <Col span="4">
            李桦
        </Col>
            <Col span="6">
            <Select v-model="model1" style="width:200px">
                <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
            </Select>
        </Col>
            <Col span="6">
            <Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
        </Col>
            <Col span="8">
            <Input v-model="value" placeholder="请输入..." style="width: 300px"></Input>
        </Col>
        </Row>

        <!-- 邀约信息模板  -->
        <div>
            <div>
                <span>邀约信息</span>
            </div>
        </div>

        <div class="ivu-form-item">
            <label class="ivu-form-item-label">面试地点</label>
            <div class="ivu-form-item-content">
                <div class="ivu-input-wrapper ivu-input-type">
                    <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                    <input type="text" placeholder="" class="ivu-input"></div>
            </div>
        </div>

        <div class="ivu-form-item">
            <label class="ivu-form-item-label">换车路线</label>
            <div class="ivu-form-item-content">
                <div class="ivu-input-wrapper ivu-input-type">
                    <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                    <input type="text" placeholder="" class="ivu-input"></div>
            </div>
        </div>

        <Row>
            <Col span="12">
                <div class="ivu-form-item">
                    <label class="ivu-form-item-label">联系人</label>
                    <div class="ivu-form-item-content">
                        <div class="ivu-input-wrapper ivu-input-type">
                            <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                            <input type="text" placeholder="" class="ivu-input"></div>
                    </div>
                </div>
            </Col>
            <Col span="12">
                <div class="ivu-form-item">
                    <label class="ivu-form-item-label">电话</label>
                    <div class="ivu-form-item-content">
                        <div class="ivu-input-wrapper ivu-input-type">
                            <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                            <input type="text" placeholder="" class="ivu-input"></div>
                    </div>
                </div>
            </Col>
        </Row>

        <Row>
            <Col span="24">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">企业福利</label>
                <div class="ivu-form-item-content">
                   <span>五险一金</span>
                   <span>法定节假日</span>
                   <span class="add-welfare">
                       <Icon type="ios-plus-outline" class="font_18" @click="showAddWelfareModal"></Icon>
                   </span>
                </div>
            </div>
            </Col>
        </Row>

        <div>
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">注意事项</label>
                <div class="ivu-form-item-content">
                    <quill-editor v-model="content"
                                  @blur="onEditorBlur($event)"
                                  @focus="onEditorFocus($event)"
                                  @ready="onEditorReady($event)"
                                  ref="myQuillEditor"
                                  :options="editorOption"></quill-editor>
                </div>
            </div>
        </div>

        <div>
            <Checkbox label="fruit">
                <Icon type="apple"></Icon>
                <span>邀请测评（职业发展测评可对面试中尽享全方位的测评，可帮助您多维度了解面试者）</span>
            </Checkbox>
        </div>

        <div>
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">注意事项</label>
                <div class="ivu-form-item-content">
                    <Row>
                        <Col span="12" class="padding_right_10">
                            <div style="border:1px solid red;">
                                <div class="float_left width_120px">
                                    <Checkbox label="twitter">
                                        <span>邮箱</span>
                                    </Checkbox>
                                </div>
                                <div class="margin_left_120">
                                    <div class="float_left width_100px">
                                        发件人
                                    </div>
                                    <div class="margin_left_100">
                                        <Radio-group v-model="vertical" vertical>
                                            <Radio label="apple">
                                                <Icon type="social-apple"></Icon>
                                                <span>Apple</span>
                                            </Radio>
                                            <Radio label="android">
                                                <Icon type="social-android"></Icon>
                                                <span>Android</span>
                                            </Radio>
                                            <Radio label="windows">
                                                <Icon type="social-windows"></Icon>
                                                <span>Windows</span>
                                            </Radio>
                                        </Radio-group>
                                    </div>
                                </div>
                                <div></div>
                            </div>
                        </Col>

                        <Col span="12" class="padding_left_10">
                            <div style="border:1px solid blue;">
                                <Checkbox label="twitter">
                                    <span>短信</span>
                                </Checkbox>
                            </div>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>

        <div>
            <span>面试官通知</span>
            <Checkbox-group v-model="fruit">
                <Checkbox label="香蕉">邮件通知</Checkbox>
                <Checkbox label="苹果">由我面试</Checkbox>
            </Checkbox-group>
        </div>

        <div>
            <Row>
                <Col span="4">
                面试官
                </Col>
                <Col span="10">
                面试时间
                </Col>
                <Col span="10">
                邮箱
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    <img src="../../assets/img/1.jpg" style="border-radius: 25px;"/>
                    <span>易之楠</span>
                </Col>
                <Col span="10">
                    <Date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
                </Col>
                </Col>
                <Col span="10">
                <Input v-model="value" placeholder="请输入..." style="width: 300px"></Input>
                </Col>
            </Row>
        </div>

        <div>
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">面试官注意事项</label>
                <div class="ivu-form-item-content">
                    <quill-editor v-model="content"
                                  @blur="onEditorBlur($event)"
                                  @focus="onEditorFocus($event)"
                                  @ready="onEditorReady($event)"
                                  ref="myQuillEditor"
                                  :options="editorOption"></quill-editor>
                </div>
            </div>
        </div>

        <Row>
            <Col span="24" class="text_center">
            <Button type="primary margin_right_15">发出邀约</Button>
            <Button type="primary margin_right_15">取消</Button>
            </Col>
        </Row>

        <!-- 添加福利 模态框 -->
        <addfare-modal-comp :isShowAddfareModal="isShowAddfareModal"></addfare-modal-comp>
        </div>
</template>

<script>
    //  富文本编辑器
    import {quillEditor } from 'vue-quill-editor'
    // 引用数据字典
    import {salaryRange} from "../../config/dataDictionary"

    import addfareModalComp from "./child/addfareModalComp"

    export default {
        components: {
            quillEditor,
            addfareModalComp
        },
        data: function() {
            return {
                // 是否显示 添加福利模态框
                isShowAddfareModal:true,
                formTop:{},
                // 富文本编辑器
                editorOption: {
                    // some quill options
                },
                content:"<h2>I am Example 1</h2>",
                model1:"beijing",
                // 多选配置
                phone:"apple",
                // 薪资范围
                salaryRange:salaryRange,
                // 下拉列表数据
                cityList: [
                    {
                        value: 'beijing',
                        label: '北京市'
                    },
                    {
                        value: 'shanghai',
                        label: '上海市'
                    },
                    {
                        value: 'shenzhen',
                        label: '深圳市'
                    },
                    {
                        value: 'hangzhou',
                        label: '杭州市'
                    },
                    {
                        value: 'nanjing',
                        label: '南京市'
                    },
                    {
                        value: 'chongqing',
                        label: '重庆市'
                    }
                ]
            }
        },
        methods: {
            // 添加福利
            showAddWelfareModal: function () {

            },
            onEditorBlur(editor) {
                console.log('editor blur!', editor)
            },
            onEditorFocus(editor) {
                console.log('editor focus!', editor)
            },
            onEditorReady(editor) {
                console.log('editor ready!', editor)
            }
        },
        computed: {
            editor() {
                return this.$refs.myTextEditor.quill
            }
        }
    }
</script>

<style scoped lang="scss">
    .inviteInterview-inviteInterview{
        min-width: 900px;
        max-width: 1200px;

        .ivu-form-item{
            padding: 0 12px;
            .ivu-form-item-label{
                line-height: 28px;
            }

        }

        // 添加福利按钮
        .add-welfare{

        }
    }

</style>
